<template>
  <div class="system-settings">
    <el-card>
      <div slot="header">
        <span>系统配置</span>
      </div>
      
      <el-tabs v-model="activeTab" type="border-card">
        <!-- 基本设置 -->
        <el-tab-pane label="基本设置" name="basic">
          <el-form :model="basicSettings" label-width="120px">
            <el-form-item label="系统名称">
              <el-input v-model="basicSettings.systemName" placeholder="请输入系统名称" />
            </el-form-item>
            <el-form-item label="系统描述">
              <el-input 
                v-model="basicSettings.systemDescription" 
                type="textarea" 
                :rows="3"
                placeholder="请输入系统描述"
              />
            </el-form-item>
            <el-form-item label="系统版本">
              <el-input v-model="basicSettings.systemVersion" placeholder="请输入系统版本" />
            </el-form-item>
            <el-form-item label="联系邮箱">
              <el-input v-model="basicSettings.contactEmail" placeholder="请输入联系邮箱" />
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="basicSettings.contactPhone" placeholder="请输入联系电话" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveBasicSettings">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 任务设置 -->
        <el-tab-pane label="任务设置" name="task">
          <el-form :model="taskSettings" label-width="120px">
            <el-form-item label="任务审核">
              <el-switch 
                v-model="taskSettings.autoApprove" 
                active-text="自动审核"
                inactive-text="手动审核"
              />
              <span class="setting-desc">开启后新发布的任务将自动通过审核</span>
            </el-form-item>
            <el-form-item label="任务有效期">
              <el-input-number 
                v-model="taskSettings.taskValidityDays" 
                :min="1" 
                :max="365"
                placeholder="请输入天数"
              />
              <span class="setting-desc">任务发布后的有效天数</span>
            </el-form-item>
            <el-form-item label="最大申请人数">
              <el-input-number 
                v-model="taskSettings.maxApplicants" 
                :min="1" 
                :max="100"
                placeholder="请输入人数"
              />
              <span class="setting-desc">单个任务的最大申请人数</span>
            </el-form-item>
            <el-form-item label="任务分类">
              <el-checkbox-group v-model="taskSettings.enabledTaskTypes">
                <el-checkbox label="labor">兼职任务</el-checkbox>
                <el-checkbox label="errand">跑腿任务</el-checkbox>
                <el-checkbox label="substitute">代课任务</el-checkbox>
                <el-checkbox label="express">快递任务</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveTaskSettings">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 用户设置 -->
        <el-tab-pane label="用户设置" name="user">
          <el-form :model="userSettings" label-width="120px">
            <el-form-item label="用户注册">
              <el-switch 
                v-model="userSettings.allowRegistration" 
                active-text="允许注册"
                inactive-text="禁止注册"
              />
              <span class="setting-desc">是否允许新用户注册</span>
            </el-form-item>
            <el-form-item label="邮箱验证">
              <el-switch 
                v-model="userSettings.emailVerification" 
                active-text="需要验证"
                inactive-text="不需要验证"
              />
              <span class="setting-desc">注册时是否需要邮箱验证</span>
            </el-form-item>
            <el-form-item label="手机验证">
              <el-switch 
                v-model="userSettings.phoneVerification" 
                active-text="需要验证"
                inactive-text="不需要验证"
              />
              <span class="setting-desc">注册时是否需要手机验证</span>
            </el-form-item>
            <el-form-item label="默认用户状态">
              <el-select v-model="userSettings.defaultUserStatus" placeholder="请选择状态">
                <el-option label="正常" value="active" />
                <el-option label="待审核" value="pending" />
                <el-option label="禁用" value="disabled" />
              </el-select>
              <span class="setting-desc">新注册用户的默认状态</span>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveUserSettings">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 通知设置 -->
        <el-tab-pane label="通知设置" name="notification">
          <el-form :model="notificationSettings" label-width="120px">
            <el-form-item label="邮件通知">
              <el-switch 
                v-model="notificationSettings.emailNotification" 
                active-text="开启"
                inactive-text="关闭"
              />
              <span class="setting-desc">是否开启邮件通知功能</span>
            </el-form-item>
            <el-form-item label="短信通知">
              <el-switch 
                v-model="notificationSettings.smsNotification" 
                active-text="开启"
                inactive-text="关闭"
              />
              <span class="setting-desc">是否开启短信通知功能</span>
            </el-form-item>
            <el-form-item label="系统通知">
              <el-switch 
                v-model="notificationSettings.systemNotification" 
                active-text="开启"
                inactive-text="关闭"
              />
              <span class="setting-desc">是否开启系统内通知功能</span>
            </el-form-item>
            <el-form-item label="通知模板">
              <el-input 
                v-model="notificationSettings.notificationTemplate" 
                type="textarea" 
                :rows="4"
                placeholder="请输入通知模板"
              />
              <span class="setting-desc">系统通知的默认模板</span>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveNotificationSettings">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 安全设置 -->
        <el-tab-pane label="安全设置" name="security">
          <el-form :model="securitySettings" label-width="120px">
            <el-form-item label="登录失败限制">
              <el-input-number 
                v-model="securitySettings.maxLoginAttempts" 
                :min="3" 
                :max="10"
                placeholder="请输入次数"
              />
              <span class="setting-desc">连续登录失败的最大次数</span>
            </el-form-item>
            <el-form-item label="锁定时间">
              <el-input-number 
                v-model="securitySettings.lockoutDuration" 
                :min="5" 
                :max="60"
                placeholder="请输入分钟"
              />
              <span class="setting-desc">账户锁定时间（分钟）</span>
            </el-form-item>
            <el-form-item label="会话超时">
              <el-input-number 
                v-model="securitySettings.sessionTimeout" 
                :min="30" 
                :max="480"
                placeholder="请输入分钟"
              />
              <span class="setting-desc">用户会话超时时间（分钟）</span>
            </el-form-item>
            <el-form-item label="密码策略">
              <el-checkbox-group v-model="securitySettings.passwordPolicy">
                <el-checkbox label="requireUppercase">需要大写字母</el-checkbox>
                <el-checkbox label="requireLowercase">需要小写字母</el-checkbox>
                <el-checkbox label="requireNumbers">需要数字</el-checkbox>
                <el-checkbox label="requireSpecialChars">需要特殊字符</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveSecuritySettings">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "SystemSettings",
  data() {
    return {
      activeTab: "basic",
      basicSettings: {
        systemName: "万代校园管理系统",
        systemDescription: "一个专为校园生活服务的综合管理平台",
        systemVersion: "1.0.0",
        contactEmail: "admin@example.com",
        contactPhone: "400-123-4567"
      },
      taskSettings: {
        autoApprove: false,
        taskValidityDays: 7,
        maxApplicants: 10,
        enabledTaskTypes: ["labor", "errand", "substitute", "express"]
      },
      userSettings: {
        allowRegistration: true,
        emailVerification: true,
        phoneVerification: false,
        defaultUserStatus: "active"
      },
      notificationSettings: {
        emailNotification: true,
        smsNotification: false,
        systemNotification: true,
        notificationTemplate: "您有新的系统通知，请及时查看。"
      },
      securitySettings: {
        maxLoginAttempts: 5,
        lockoutDuration: 15,
        sessionTimeout: 120,
        passwordPolicy: ["requireUppercase", "requireLowercase", "requireNumbers"]
      }
    }
  },
  async created() {
    await this.loadSettings()
  },
  methods: {
    async loadSettings() {
      try {
        const response = await this.$http.get("/admin/settings")
        if (response.data.code === 200) {
          const settings = response.data.data
          this.basicSettings = { ...this.basicSettings, ...settings.basic }
          this.taskSettings = { ...this.taskSettings, ...settings.task }
          this.userSettings = { ...this.userSettings, ...settings.user }
          this.notificationSettings = { ...this.notificationSettings, ...settings.notification }
          this.securitySettings = { ...this.securitySettings, ...settings.security }
        }
      } catch (error) {
        console.error("加载系统设置失败:", error)
        this.$message.warning("使用默认设置")
      }
    },

    async saveBasicSettings() {
      try {
        const response = await this.$http.put("/admin/settings/basic", this.basicSettings)
        if (response.data.code === 200) {
          this.$message.success("基本设置保存成功")
        } else {
          this.$message.error(response.data.message || "保存失败")
        }
      } catch (error) {
        console.error("保存基本设置失败:", error)
        this.$message.error("保存失败")
      }
    },

    async saveTaskSettings() {
      try {
        const response = await this.$http.put("/admin/settings/task", this.taskSettings)
        if (response.data.code === 200) {
          this.$message.success("任务设置保存成功")
        } else {
          this.$message.error(response.data.message || "保存失败")
        }
      } catch (error) {
        console.error("保存任务设置失败:", error)
        this.$message.error("保存失败")
      }
    },

    async saveUserSettings() {
      try {
        const response = await this.$http.put("/admin/settings/user", this.userSettings)
        if (response.data.code === 200) {
          this.$message.success("用户设置保存成功")
        } else {
          this.$message.error(response.data.message || "保存失败")
        }
      } catch (error) {
        console.error("保存用户设置失败:", error)
        this.$message.error("保存失败")
      }
    },

    async saveNotificationSettings() {
      try {
        const response = await this.$http.put("/admin/settings/notification", this.notificationSettings)
        if (response.data.code === 200) {
          this.$message.success("通知设置保存成功")
        } else {
          this.$message.error(response.data.message || "保存失败")
        }
      } catch (error) {
        console.error("保存通知设置失败:", error)
        this.$message.error("保存失败")
      }
    },

    async saveSecuritySettings() {
      try {
        const response = await this.$http.put("/admin/settings/security", this.securitySettings)
        if (response.data.code === 200) {
          this.$message.success("安全设置保存成功")
        } else {
          this.$message.error(response.data.message || "保存失败")
        }
      } catch (error) {
        console.error("保存安全设置失败:", error)
        this.$message.error("保存失败")
      }
    }
  }
}
</script>

<style scoped>
.system-settings {
  padding: 0;
}

.setting-desc {
  margin-left: 10px;
  color: #909399;
  font-size: 12px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-tabs {
  margin-top: 20px;
}
</style>
